<div>
  <mat-checkbox [(ngModel)]="accessStrategy.surrogateEnabled">
    <ng-container i18n="services.form.label.sas.surrogate.enabled">
      {{ messages.services_form_label_sas_surrogate_enabled }}
    </ng-container>
  </mat-checkbox>
  <mat-icon style="font-size: medium"
           i18n-matTooltip="services.form.tooltip.sas.surrogate.enabled"
           [matTooltip]="messages.services_form_tooltip_sas_surrogate_enabled">help
  </mat-icon>
</div>

<div style="padding-top:10px;">
  <ng-container i18n="services.form.label.sas.surrogate.requiredAttributes">
    {{ messages.services_form_label_sas_surrogate_requiredAttributes }}
  </ng-container>
  <mat-icon style="font-size: medium"
           i18n-matTooltip="services.form.tooltip.sas.surrogate.requiredAttributes"
           [matTooltip]="messages.services_form_tooltip_sas_surrogate_requiredAttributes">help
  </mat-icon>
  <mat-table [dataSource]="dataSource">
    <ng-container cdkColumnDef="source">
      <mat-header-cell *cdkHeaderCellDef [ngClass]="'nameWidth'">Name</mat-header-cell>
      <mat-cell *cdkCellDef="let row" [ngClass]="'nameWidth'">
        <mat-form-field>
          <input matInput #text
                 [ngModel]="row.key"
                 (change)="doChange(row,$event.target.value)">
        </mat-form-field>
      </mat-cell>
    </ng-container>

    <ng-container cdkColumnDef="mapped">
      <mat-header-cell *cdkHeaderCellDef [ngClass]="'valueWidth'">Value</mat-header-cell>
      <mat-cell *cdkCellDef="let row" [ngClass]="'valueWidth'">
        <mat-form-field>
          <input matInput
                 [ngModel]="accessStrategy.surrogateRequiredAttributes[row.key]"
                 (ngModelChange)="accessStrategy.surrogateRequiredAttributes[row.key] = $event.split(',')">
        </mat-form-field>
      </mat-cell>
    </ng-container>

    <ng-container cdkColumnDef="delete">
      <mat-header-cell *cdkHeaderCellDef [ngClass]="'actionWidth'"></mat-header-cell>
      <mat-cell *cdkCellDef="let row" [ngClass]="'actionWidth'">
        <button mat-icon-button (click)="delete(row)"><mat-icon style="font-size: medium">delete</mat-icon></button>
      </mat-cell>
    </ng-container>

    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>

  </mat-table>
  <div style="height:25px;padding-top: 5px;">
    <button mat-mini-fab (click)="addRow()" style="float:right;">+</button>
  </div>
</div>

